// 直播间广告图
<template>
  <div>
    <el-container>
		<el-header>
			<el-button type="primary" @click="add_bt">添加</el-button>
		</el-header>
		<el-main>
			<el-table :data="list" style="width: 100%">
				<el-table-column label="排序" prop="sort">
				</el-table-column>
				
				<el-table-column label="图片名" prop="name">
				</el-table-column>

				<el-table-column label="图片" prop="image" >
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px" :src="$get_img+scope.row.image"></el-image>
					</template>
				</el-table-column>

				<el-table-column label="操作" >
					 <template slot-scope="scope">
						<el-button @click="handleUpdate(scope.row)" type="warning" size="small">更新</el-button>
						<el-button @click="handleDelete(scope.row.id)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog
				title="添加消息"
				:visible.sync="dialogVisible"
				width="30%"
				:before-close="handleClose">
				<el-form :rules="rules" ref="form" :model="formValue" label-width="80px">
					<el-form-item label="图片名" prop="name">
						<el-input v-model="formValue.name" class="input"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<Pic :url="formValue.image" index="image" @get_url="get_url" @delImg="delImg"></Pic>
					</el-form-item>
					<el-form-item label="排序" prop="sort">
						<el-input v-model="formValue.sort" type="number" class="input"></el-input>
					</el-form-item>
        </el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addCancel_bt">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</el-dialog>

		</el-main>
		<el-footer>
			<el-pagination background layout="prev, pager, next" :page-size="search_form.num" :total="total"
				@current-change="current_change">
			</el-pagination>
		</el-footer>
	</el-container>
  </div>
</template>

<script>
import Pic from '../../components/UploadPicOne.vue'
	export default {
		components: {
			Pic
		},
  data() {
    return {
      dialogVisible: false,
				list: [], //请求数据列表
				total: 0,
				edit_type: 0, // 0添加， 1编辑
				url: ["/cms/table/insert", "/cms/table/update"],
				edit_tips: ["添加成功", "修改成功"],
        tableName : 'play_banners',
				formValue: {  //消息提示
					table: '',
					name: '',
					image: '',
					sort: '',
				},
        rules: { //消息验证
					name: [
            { required: true, message: '请输入图片名', trigger: 'blur' },
          ],
					sort: [
            { required: true, message: '请输入数字', trigger: 'blur' },
          ],
				},
				// 分页请求数据
				search_form: {
					table: 'play_banners',
					page:1,//页码
    			num:5,//每页显示条数
    			where:null,
    			orderBy:"id",
    			asdes:"desc"
				}
    }
  },
  mounted() {
			// 获取数据
			this.get_data()
	},
  methods: {
  // 添加按钮
    add_bt() {
      this.dialogVisible = true
      this.edit_type = 0
    },
    handleClose() {
				this.dialogVisible = false
    },
    edit_bt(row) {
      this.edit_type = 1
      this.form = row
      this.visible = true
    },
    addCancel_bt() {
      this.$refs.ruleNotice.resetFields();
      this.dialogVisible = false

    },
    get_data() {
      this.search_form.table = this.tableName
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$model.post("/cms/table/get", this.search_form).then(res => {
        if (res.code == 200) {
          loading.close();
          this.list = res.data.data
          this.total = res.data.total
        }
      })
    },

    get_url(e) {
				this.formValue[e.index] = e.url
    },
    delImg(e) {
      this.formValue[e] = ""
    },
    submit() {
    this.formValue["table"] = "play_banners"
    this.$model.post(this.url[this.edit_type], this.formValue).then(res => {
      if (res.code == 200) {
        this.$message({
          message: this.edit_tips[this.edit_type],
          type: 'success'
        });
        this.dialogVisible = false
        this.clear()
				this.get_data()
      }
    })
			},

  // 更新
    handleUpdate(row) {
      this.edit_type = 1
      this.formValue = row
      this.dialogVisible = true
      
    },

    handleDelete(id) {
      let url = "/cms/table/del?table=play_banners&id=" + id
      this.$model.put(url).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '已删除',
            type: 'success'
          });
          this.search_form.page = 1
          this.get_data()
        }
      })
    },

    clear() {
      this.edit_type = 0
      this.handleClose()
      this.form = {
        name: '',
        image: '',
        sort: 0,
        table: this.tableName
      }
    },
    current_change(e) {
				this.search_form.page = e
				this.get_data()
		},
  },
}
</script>

<style>

</style>